<template>
  <div style="height:500px">
    <el-dialog :visible.sync="dialogVisible" width="1000px">
      <el-form :inline="true" class="demo-form-inline">
        <el-input
          placeholder="输入关键字进行过滤"
          v-model="filterText"
          style="width:200px;margin: 0 10px 10px 0"
        ></el-input>
        <el-button type="primary" icon="el-icon-upload2" round @click="collapseOrExpandAll(true)">展开</el-button>
        <el-button type="primary" icon="el-icon-download" round @click="collapseOrExpandAll(false)">收起</el-button>
      </el-form>
      <p class="text-red">点击复选框即可绑定或解除绑定菜单,勾选或取消勾选父级，下级会跟随父组件，数据将会1.5秒后刷新</p>
      <el-divider></el-divider>

      <div class="custom-tree-container">
        <div class="block">
          <el-tree
            :data="data"
            :props="defaultProps"
            show-checkbox
            :check-strictly="true"
            setChecked node-key="purviewId"
            :default-expand-all="false"
            :expand-on-click-node="false"
            :default-checked-keys="checkedValues"
            :filter-node-method="filterNode"
            ref="tree"
            :render-content="renderContent"
            @check="handleCheck"
          ></el-tree>
        </div>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import apisystemmenu from "@/api/baseManager/systemmenu";
export default {
  name: "dialogBindRoleMenu",
  data() {
    return {
      refreshStack:[], //刷新树形组件数据请求栈
      checkedValues: [], //已选菜单
      dialogVisible: false, //弹框显示隐藏
      filterText: "", //过滤
      data: [], //数据
      roleId: "", //角色id
      defaultProps: {
        children: "menus",
        label: "purviewName"
      }
    };
  },

  watch: {
    filterText(val) {
      this.$refs.tree.filter(val);
    }
  },
  methods: {
    filterNode(value, data) {
      if (!value) return true;
      return data.purviewName.indexOf(value) !== -1;
    },
    collapseOrExpandAll(expandAll) {
      this.$refs.tree.$children.forEach(e => {
        extendNode(this.$refs.tree.$children, expandAll);
        function extendNode(nodes, expandAll) {
          for (let i = 0; i < nodes.length; i++) {
            if (nodes[i].node) {
              nodes[i].node.expanded = expandAll;
            }
            if (
              nodes[i]?.node?.childNodes &&
              nodes[i]?.node?.childNodes?.length > 0
            ) {
              extendNode(nodes[i].node.childNodes, expandAll);
            }
            if (nodes[i]?.childNodes && nodes[i]?.childNodes?.length > 0) {
              extendNode(nodes[i].childNodes, expandAll);
            }
          }
        }
      });
    },
    //勾选（绑定）或者取消勾选（取消绑定）
    handleCheck(node,checked,c) {
      apisystemmenu.bindRoleAndMenu({roleId:this.roleId,purviewId:node.purviewId}).then(res=>{
        this.refreshStack.unshift(1) //向栈里推送一个记录
        setTimeout(() => {
          if(this.refreshStack.length>1){ //如果栈长度大于1 说明有新的请求在里面 放弃自己的请求
          } else {
            this.openDialogbindrolemenu(this.roleId)
            this.$message({ type: "success", message: "操作成功！" });
          }
          this.refreshStack.pop() //弹出自己的请求
        }, 1500);
      })
    },
    renderContent(h, { node, data, store }) {
       if (data.isUse == 0) {
         return (
            <span class="custom-tree-node"  >
              <span style="color:red">{node.label}</span>
            </span>
          )
       } else {
          return (
            <span class="custom-tree-node"  >
              <span style="">{node.label}</span>
            </span>
          )
       }
    },
    //查看 加载菜单数据
    openDialogbindrolemenu(roleId) {
      this.roleId = roleId;
      this.dialogVisible = true;
      this.checkedValues = [];
      apisystemmenu.getListForRole(this.roleId).then(res => {
        this.data = res.data.list;
        this.handleCheckedValues(this.data);
      });
    },
    handleCheckedValues(list) {
      for (let i = 0; i < list.length; i++) {
        if (list[i].roleId) {
          this.checkedValues.push(list[i].purviewId);
        }
        if (list[i].menus) {
          this.handleCheckedValues(list[i].menus);
        }
      }
    }
  }
};
</script>

<style scoped>
.custom-tree-node {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 14px;
  padding-right: 8px;
}
.custom-tree-container{
  height: 500px;
  overflow: auto;
 
}
</style>